<template>
	<view>
		<view>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view v-if="current === 0">
			<view>
				<u-table>
					<u-tr>
						<u-th>序列</u-th>
						<u-th>开始时间</u-th>
						<u-th>结束时间</u-th>
						<u-th>操作</u-th>
					</u-tr>
					<view v-for="(item, index) in resData" :key="index">
						<u-tr>
							<u-td>{{index+1}}</u-td>
							<u-td>
								<p @click="changeTimeX(index)">{{item.begin}}</p>
							</u-td>
							<u-td>
								<p @click="changeTimeY(index)">{{item.end}}</p>
							</u-td>
							<u-td>
								<p v-on:click="deleteTimeX(index)">删除</p>
							</u-td>
						</u-tr>
					</view>
				</u-table>
			</view>
			<view>
				<!--淘汰了-->
				<u-picker mode="multiSelector" v-model="Xshow" :default-selector="[0,0]" :range="multiSelector"
					@confirm="addTimeX()"></u-picker>
				<u-picker mode="multiSelector" v-model="Xflag" :default-selector="[0,0]" :range="multiSelector"
					@confirm="changeTimeZoneX()"></u-picker>
				<!-- end -->
				<u-modal v-model="tip" :content="content"></u-modal>

				<!--修改时间-->
				<u-modal v-model="timeShowX" title="输入开始时间" @confirm="confirmBeginTime()" @cancel=""
					show-cancel-button="true">
					<view class="slot-content">
						<u-input v-model="timeValueX" border="true" />
					</view>
				</u-modal>
				<!--修改时间-->
				<u-modal v-model="timeShowY" title="输入结束时间" @confirm="confirmEndTime()" @cancel=""
					show-cancel-button="true">
					<view class="slot-content">
						<u-input v-model="timeValueY" border="true" />
					</view>
				</u-modal>
			</view>
			<view>
				<view class="btn">
					<u-button class="u-m-r-5" @click="changeShowX()" plain type="primary">增加区间</u-button>
				</view>
				<!--增加区间的-->
				<u-modal v-model="aflag" title="输入时间段" @confirm="addTime()" @cancel="" show-cancel-button="true">
					<view class="slot-content">
						<u-input v-model="beginTimeVal" border="true" placeholder="开始时间" />
						<u-input v-model="endTimeVal" border="true" placeholder="结束时间" />
					</view>
				</u-modal>
			</view>
		</view>
		<view v-else>
			<view>
				<u-table>
					<u-tr>
						<u-th>序列</u-th>
						<u-th>开始时间</u-th>
						<u-th>结束时间</u-th>
						<u-th>操作</u-th>
					</u-tr>
					<view v-for="(item, index) in data" :key="index">
						<u-tr>
							<u-td>{{index+1}}</u-td>
							<u-td>
								<p @click="changeTimeA(index)">{{item.begin}}</p>
							</u-td>
							<u-td>
								<p @click="changeTimeB(index)">{{item.end}}</p>
							</u-td>
							<u-td>
								<p v-on:click="deleteTime(index)">删除</p>
							</u-td>
						</u-tr>
					</view>
				</u-table>
			</view>
			<view>
				<!-- 注释掉的代码 -->
				<u-picker mode="multiSelector" v-model="show" :default-selector="[0,0]" :range="multiSelector"
					@confirm="addTime()"></u-picker>
				<u-picker mode="multiSelector" v-model="flag" :default-selector="[0,0]" :range="multiSelector"
					@confirm="changeTimeZone()"></u-picker>
				<!-- end -->
				<u-modal v-model="tip" :content="content"></u-modal>

				<!--修改时间-->
				<u-modal v-model="timeShowA" title="输入开始时间" @confirm="confirmBeginTimeA()" @cancel=""
					show-cancel-button="true">
					<view class="slot-content">
						<u-input v-model="timeValueBegin" border="true" />
					</view>
				</u-modal>
				<!--修改时间-->
				<u-modal v-model="timeShowB" title="输入结束时间" @confirm="confirmEndTimeB()" @cancel=""
					show-cancel-button="true">
					<view class="slot-content">
						<u-input v-model="timeValueEnd" border="true" />
					</view>
				</u-modal>
			</view>
			<view>
				<view class="btn">
					<u-button class="u-m-r-5" @click="changeShow()" plain type="primary">增加区间</u-button>
				</view>
				<!--增加区间的-->
				<u-modal v-model="bflag" title="输入时间段" @confirm="addTimeX()" @cancel="" show-cancel-button="true">
					<view class="slot-content">
						<u-input v-model="beginTimeVal" border="true" placeholder="开始时间" />
						<u-input v-model="endTimeVal" border="true" placeholder="结束时间" />
					</view>
				</u-modal>
			</view>
		</view>

	</view>

</template>

<script>
	import api from '../../utils/api.js'
	export default {
		data() {
			return {
				aflag: false,
				bflag: false,
				beginTimeVal: '',
				endTimeVal: '',
				timeValueX: '',
				timeValueY: '',
				timeShowX: false,
				timeShowY: false,
				timeShowA: false,
				timeShowB: false,
				timeValueBegin: "",
				timeValueEnd: '',
				show: false,
				Xshow: false,
				flag: false,
				Xflag: false,
				data: [],
				resData: [],
				timeZone: {
					begin: '',
					end: '',
					branchId: '',
					status: ''
				},
				multiSelector: [
					["07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00",
						"12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00",
						"17:30", "18:00"
					],
					["07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00",
						"12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00",
						"17:30", "18:00"
					]
				],
				timeVal: [],
				nowChoose: '',
				tip: false,
				content: '结束时间需大于起始时间',
				list: [{
					name: '修改预约时间表'
				}, {
					name: '修改排班时间表'
				}],
				current: 0
			}
		},
		created() {
			// 获得排版的数据
			this.requestArrangeData()

			// 获得预约的数据
			this.requestAppiontmentData()
		},
		methods: {
			// 判断输入的时间格式
			judgeTimeFormat(e) {
				var reg = /^(20|21|22|23|[0-1]\d):[0-5]\d$/;
				var regExp = new RegExp(reg);
				if (!regExp.test(e)) {
					console.log("时间格式不正确，正确格式为：00:00 - 24:00");
					return 1;
				} else {
					return 2;
				}
			},
			confirmBeginTimeA() {
				console.log("输入的修改开始时间的内容是：" + this.timeValueBegin)
				var flag = this.judgeTimeFormat(this.timeValueBegin)
				if (flag === 1) {
					this.tip = true
					this.content = '输入的时间格式不正确'
				} else {
					// 修改时间
					this.data[this.nowChoose].begin = this.timeValueBegin
					api.changeTimeOrder(this.data[this.nowChoose]).then(res => {
						console.log(res)
						if (res.code === 0) {
							this.tip = true
							this.content = '修改成功'
						} else {
							this.tip = true
							this.content = '系统错误'
						}

					})
					this.timeValueBegin = ""
				}

			},
			confirmEndTimeB() {
				console.log(this.timeValueEnd)
				var flag = this.judgeTimeFormat(this.timeValueEnd)
				if (flag === 1) {
					this.tip = true
					this.content = '输入的时间格式不正确'
				} else {
					this.data[this.nowChoose].end = this.timeValueEnd
					// 修改时间
					api.changeTimeOrder(this.data[this.nowChoose]).then(res => {
						console.log(res)
						if (res.code === 0) {
							this.tip = true
							this.content = '修改成功'
						} else {
							this.tip = true
							this.content = '系统错误'
						}

					})
					this.timeValueEnd = ""
				}
			},
			// 确定修改预约开始时间
			confirmBeginTime() {
				console.log(this.timeValue)
				var flag = this.judgeTimeFormat(this.timeValueX)
				if (flag === 1) {
					this.tip = true
					this.content = '输入的时间格式不正确'
				} else {
					this.resData[this.nowChoose].begin = this.timeValueX
					// 修改时间
					api.changeTimeOrder(this.resData[this.nowChoose]).then(res => {
						console.log(res)
						if (res.code === 0) {
							this.tip = true
							this.content = '修改成功'
						} else {
							this.tip = true
							this.content = '系统错误'
						}

					})
					this.timeValueX = ""
				}

			},
			// 确定修改预约结束时间
			confirmEndTime() {
				console.log(this.timeValue)
				var flag = this.judgeTimeFormat(this.timeValueY)
				if (flag === 1) {
					this.tip = true
					this.content = '输入的时间格式不正确'
				} else {
					this.resData[this.nowChoose].end = this.timeValueY
					// 修改时间
					api.changeTimeOrder(this.resData[this.nowChoose]).then(res => {
						console.log(res)
						if (res.code === 0) {
							this.tip = true
							this.content = '修改成功'
						} else {
							this.tip = true
							this.content = '系统错误'
						}

					})
					this.timeValueY = ""
				}

			},
			requestArrangeData() {
				api.getTimeOrder(this.globalConst.ARRANGEMENT_ARRANGE_TYPE).then(res => {
					console.log(res)
					let data = res.data
					this.data = data
				})
			},
			requestAppiontmentData() {
				api.getTimeOrder(this.globalConst.ARRANGEMENT_APPIONTMENT_TYPE).then(res => {
					console.log(res)
					this.resData = res.data
				})
			},
			// 切换标签栏
			change(index) {
				this.current = index;
				if (index === 0) {
					this.requestArrangeData()
				} else {
					this.requestAppiontmentData()
				}
			},
			// 删除对应的时间段
			deleteTime: function(index) {
				console.log(this.data[index].id)
				api.deleteTimeOrder(this.data[index].id).then(res => {
					if (res.code === 0) {
						this.data.splice(index, 1)
						//this.flag = true
						this.tip = true
						this.content = '删除成功'
						this.requestArrangeData()

					} else {
						this.tip = true
						this.content = '当前时间段只能修改不能删除'
					}

					console.log(res)
				})
			},
			deleteTimeX: function(index) {
				console.log(this.resData[index].id)
				api.deleteTimeOrder(this.resData[index].id).then(res => {
					if (res.code === 0) {
						this.data.splice(index, 1)
						//this.flag = true
						this.tip = true
						this.content = '删除成功'
						this.requestAppiontmentData()
					} else {
						this.tip = true
						this.content = '当前时间段只能修改不能删除'
					}

					console.log(res)
				})
			},
			changeShow: function() {
				this.bflag = true
			},
			changeShowX: function() {
				this.aflag = true
			},
			addTime: function(res) {
				let user = uni.getStorageSync("user");
				var begin = this.beginTimeVal
				var end = this.endTimeVal

				var one = this.judgeTimeFormat(begin)
				var two = this.judgeTimeFormat(end)

				if (one === 1 || two === 1) {
					this.tip = true
					this.content = '时间格式不正确，正确格式为：00:00,注意:是英文字符'
				} else {
					this.timeZone.begin = begin;
					this.timeZone.end = end;
					this.timeZone.branchId = user.branchId
					this.timeZone.status = this.globalConst.ARRANGEMENT_APPIONTMENT_TYPE
					api.addTimeOrder(this.timeZone).then(res => {
						if (res.code === 0) {
							this.tip = true
							this.content = '添加成功'
							this.requestAppiontmentData()
						} else {
							this.tip = true
							this.content = '系统错误'
						}
					})
				}

			},
			addTimeX: function(res) {
				let user = uni.getStorageSync("user");
				var begin = this.beginTimeVal
				var end = this.endTimeVal
				var one = this.judgeTimeFormat(begin)
				var two = this.judgeTimeFormat(end)

				if (one === 1 || two === 1) {
					this.tip = true
					this.content = '时间格式不正确，正确格式为：00:00,注意:是英文字符'
				} else {
					this.timeZone.begin = begin
					this.timeZone.end = end;
					this.timeZone.branchId = user.branchId
					this.timeZone.status = this.globalConst.ARRANGEMENT_ARRANGE_TYPE
					api.addTimeOrder(this.timeZone).then(res => {
						if (res.code === 0) {
							this.tip = true
							this.content = '添加成功'
							this.requestArrangeData()
						} else {
							this.tip = true
							this.content = '系统错误'
						}
					})
				}
			},
			changeTimeA: function(index) {
				//this.flag = true
				this.timeShowA = true;
				this.nowChoose = index
			},
			changeTimeB: function(index) {
				// this.Xflag = true
				this.nowChoose = index
				this.timeShowB = true;
			},
			changeTimeX: function(index) {
				// this.Xflag = true
				this.nowChoose = index
				this.timeShowX = true;
			},
			changeTimeY: function(index) {
				// this.Xflag = true
				this.nowChoose = index
				this.timeShowY = true;
			},
			changeTimeZone: function(res) {
				let user = uni.getStorageSync("user");
				if (res[0] > res[1]) {
					this.tip = true;
				} else {
					this.data[this.nowChoose].begin = this.multiSelector[0][res[0]];
					this.data[this.nowChoose].end = this.multiSelector[1][res[1]];
					api.changeTimeOrder(this.data[this.nowChoose]).then(res => {
						console.log(res)
						if (res.code === 0) {
							this.tip = true
							this.content = '修改成功'
						} else {
							this.tip = true
							this.content = '系统错误'
						}

					})
				}

			},
			changeTimeZoneX: function(res) {
				console.log(res)
				let user = uni.getStorageSync("user");
				if (res[0] > res[1]) {
					this.tip = true;
				} else {
					this.resData[this.nowChoose].begin = this.multiSelector[0][res[0]];
					this.resData[this.nowChoose].end = this.multiSelector[1][res[1]];
					api.changeTimeOrder(this.resData[this.nowChoose]).then(res => {
						console.log(res)
						if (res.code === 0) {
							this.tip = true
							this.content = '修改成功'
						} else {
							this.tip = true
							this.content = '系统错误'
						}

					})
				}

			}

		}
	}
</script>

<style>
	.btn {
		margin: 0 auto;
		width: 60%;
	}
</style>
